<template>
    <div class="detail">
        <div class="info" v-if="info">
            <img :src="info.goodsImg" alt="">
            <p class="name  ">{{ info.goodsName }}</p>
            <p class="price">{{ info.goodsPrice }}</p>
        </div>
        <div>
           <button>加入购物车</button>
        </div>
        
    </div>
</template>

<script>
// 单文件组件 -> 一个.vue文件就是一个组件 (template script style)
// @ is an alias to /src

import axios from '@/utils/request';

export default {
    name: 'DetailView',
    data() {
        return {
            gid: null,
            info: null,
        }
    },
    methods: {
        getDetail() {
            axios.get("/searchGoodsByGoodsId.php",{ // 配置对象
                params:{  // params对象-> get传参
                  gid:this.gid,
               }
            }).then(response => {
                if (response.status == 200) {
                    return response.data;
                } else {
                    var err = new Error("Request Fail!");
                    // throw err;
                    return Promise.reject(err);
                }
            }).then(res => {
                console.log("商品详情成功", res);
                this.info = res.data;
            }).catch(err => {
                console.log("err", err);
            })
        }
    },
    mounted() {
        // console.log("Detail组件",this);
        // console.log("route",this.$route);
        // console.log("router",this.$router);
        console.log("query", this.$route.query);

        var { gid } = this.$route.query;
        this.gid = gid;

        this.getDetail();

    }
}

</script>


<style scoped>
    .info{
        padding: 0.2rem;
    }

    .info img{
        width: 100%;
    }


</style>
